<template>
  <div class="appendMember">
    <div v-for="(item,index) in appendData" :key="index" class="item" :style="item.type === 'aTime'?'display:flex':''">
      <div class="itemName"><div v-if="item.must" style="color: red">*</div>{{item.name}}：</div>
      <div v-if="item.type === 'input'">
        <a-input style="width: 200px" v-model="item.val" :disabled="disables" :placeholder="item.place" :type="item.name === '品相次数'?'number':''" />
      </div>
      <div v-if="item.type === 'cascader'">
        <a-cascader style="width: 200px" :value="item.val" :disabled="disables" :options="item.selectData" :placeholder="item.place" @change="e=>{cascaderChange(e,index)}" />
      </div>
      <div v-if="item.type === 'radio'">
        <a-radio-group v-model="item.val" :disabled="disables">
          <a-radio value="1">男</a-radio>
          <a-radio value="2">女</a-radio>
        </a-radio-group>
      </div>
      <div v-if="item.type === 'aTime'" class="aTime">
        <a-radio-group v-model="item.long" :disabled="disables">
          <a-radio value="0">终身有效</a-radio>
          <a-radio value="1"><a-input :disabled="disables" style="width: 70px;margin-right: 10px" v-model="item.val" placeholder="自定义" />天有效</a-radio>
        </a-radio-group>
      </div>
      <div v-if="item.type === 'birth'">
        <a-date-picker  />
      </div>
      <div v-if="item.type === 'code'">
        <a-input style="width: 100px" v-model="item.val" :placeholder="item.place" />
        <a-button>获取验证码</a-button>
      </div>
      <div v-if="item.type === 'select'">
        <a-select
          show-search
          placeholder="Select a person"
          option-filter-prop="children"
          style="width: 200px"
          :filter-option="filterOption"
          @change="e=>{selectChange(index,e)}"
          :value="item.val?item.val:undefined"
          :placeholder="item.place"
          allowClear
        >
          <a-select-option v-for="(demo,idx) in item.selectData" :value="demo[item.idKey]" :key="idx">
            {{demo[item.nameKey]}}
          </a-select-option>
        </a-select>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'appendStore',
    props:{
      appendData: Array,
      disables: Boolean
    },
    methods:{
      cascaderChange(e,index){
        this.appendData[index].val = e;
      },
      selectChange(index,idx){
        this.appendData[index].val = idx;
      },
      filterOption(input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
      },
      sendData(){
        let configData = {};
        for(let i=0;i<this.appendData.length;i++){
          if(!this.appendData[i].long){
            if(typeof this.appendData[i].key === 'object'){
              if(this.appendData[i].must && this.appendData[i].val.length<=0) return this.$message.info(this.appendData[i].place);
              this.appendData[i].key.forEach((item,index)=>{
                configData[item] = this.appendData[i].val[index]
              })
            }else{
              if(this.appendData[i].must && !this.appendData[i].val) return this.$message.info(this.appendData[i].place);
              configData[this.appendData[i].key] = this.appendData[i].val
            }
          }else{
            if(this.appendData[i].long != 0 && !this.appendData[i].val) return this.$message.info(this.appendData[i].place);
            configData[this.appendData[i].key] = this.appendData[i].long == 0?0:this.appendData[i].val
          }
        }
        this.$emit('sendData',configData);
      }
    }
  }
</script>
<style lang="less" scoped>
  .appendMember{
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 25%;
      display: flex;
      align-items: center;
      margin-bottom: 21px;
      .aTime{
        .ant-radio-group{
          display: flex;
          align-items: center;
        }
      }
      .itemName{
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: 100px;
        justify-content: flex-end;
      }
    }
  }
</style>
